<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Task37 UI组件之浮出层</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft Yahei"
    }
    
    .layer {
        display: flex;
        flex-direction: column;
        margin: auto;
        display: none;
    }
    
    #layer_title {
        margin: 0;
        border: 3px solid #000;
        color: #fff;
        background-color: #000;
        padding: 8px 0;
        text-indent: 5px;
    }
    
    #confirm,
    #cancel {
        width: 100px;
        position: absolute;
        bottom: 10px;
        border: none;
        padding: 5px;
        background-color: rgba(200, 100, 100, .7);
        cursor: pointer;
    }
    
    #cancel {
        right: 10px;
    }
    
    #wrapper {
        display: none;
    }
    
    #confirm {
        right: 130px;
    }
    
    #txtarea {
        background-color: #fff;
        color: #000;
        border-top: none;
        text-indent: 5px;
        border: 1px solid #000;
    }
    </style>
</head>

<body>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <div id="wrapper"></div>
    <div class="layer" id="layer">
        <p id="layer_title">这是浮出层标题</p>
        <textarea placeholder="这是一个浮出层" id="txtarea" readonly="readonly"></textarea>
        <div class="btn">
            <input type="button" value="确定" id="confirm">
            <input type="button" value="取消" id="cancel">
        </div>
    </div>
    <input type="button" id="test1" value="测试可拖动浮出层">
    <input type="button" id="test2" value="测试可缩放浮出层">
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <p>正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本正常文本</p>
    <br>
    <script type="text/javascript">
    var mywrapper = document.getElementById("wrapper");
    var mylayer = document.getElementById('layer');

    var txt = document.getElementById("txtarea");
    var btn_confirm = document.getElementById('confirm');

    /**
     * myLayer对象，show方法接受背景包裹层和浮出层两个参数
     */
    var myLayer = {
        onscroll: (function() {
            window.onscroll = function(e) {
                var e = window.event || e;
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                layer.style.top = window.innerHeight / 2 - layer.clientHeight / 2 + scrollTop + "px";
            }
        })(),
        show: function(wrapper, layer) {
            var browser_width = document.body.clientWidth; //body的宽
            var browser_height = document.body.clientHeight; //body的高
            wrapper.style.display = "block";

            wrapper.style.height = browser_height + "px";
            wrapper.style.width = browser_width + "px";
            wrapper.style.position = "absolute";
            wrapper.style.top = 0;
            wrapper.style.right = 0;
            wrapper.style.backgroundColor = "rgba(133,133,133,.5)";

            txt.style.height = "200px";
            txt.style.width = "300px";

            layer.style.position = "absolute";
            layer.style.display = "block";
            layer.style.width = "300px";

            layer.style.top = window.innerHeight / 2 - layer.clientHeight / 2 + "px";
            layer.style.left = window.innerWidth / 2 - layer.clientWidth / 2 + "px";

            //实时显示浮出层的尺寸
            (function getTxtSize() {
                layer.style.width = txt.clientWidth + 2 + "px";
                setTimeout(getTxtSize, 0)
            })();
        },
        hide: function(wrapper, layer) {
            layer.style.display = "";
            wrapper.style.display = "";
            drag = {};
        },

    }

    /**
     * myDrag函数，里面包含了拖动的对象drag，接受一个需要拖动的参数
     */
    var myDrag = function() {
        return drag = {
            o: null,
            init: function(o) {
                o.onmousedown = this.start;
            },
            start: function(e) {
                var o;
                e = drag.fixEvent(e);
                e.preventDefault && e.preventDefault();
                drag.o = o = this;
                o.x = e.clientX - drag.o.offsetLeft;
                o.y = e.clientY - drag.o.offsetTop;
                document.onmousemove = drag.move;
                document.onmouseup = drag.end;
            },
            move: function(e) {
                e = drag.fixEvent(e);
                var oLeft, oTop;
                oLeft = e.clientX - drag.o.x;
                oTop = e.clientY - drag.o.y;
                drag.o.style.left = oLeft + 'px';
                drag.o.style.top = oTop + 'px';
            },
            end: function(e) {
                e = drag.fixEvent(e);
                drag.o = document.onmousemove = document.onmouseup = null;
            },
            fixEvent: function(e) {
                if (!e) {
                    e = window.event;
                    e.target = e.srcElement;
                    e.layerX = e.offsetX;
                    e.layerY = e.offsetY;
                }
                return e;
            },
            cancelEvent: function(o) {
                o.onmousedown = null;
            }
        }
    }

    function init1() {
        var obj = document.getElementById('layer');
        myDrag();
        drag.init(obj);
        myLayer.show(wrapper, layer);
    }

    function init2() {
        var obj = document.getElementById('layer');
        myDrag();
        drag.cancelEvent(obj);
        myLayer.show(wrapper, layer);
    }

    //给两个不同按钮绑定各自的函数
    document.getElementById('test1').addEventListener("click", init1, false);
    document.getElementById('test2').addEventListener("click", init2, false);

    //给确定和取消按钮榜定对应的函数
    document.getElementById("cancel").addEventListener("click", function() {
        alert("你点击了取消")
        myLayer.hide(mywrapper, mylayer);
    }, false);
    document.getElementById("confirm").addEventListener("click", function() {
        alert("你点击了确定！");
        myLayer.hide(mywrapper, mylayer);
    }, false)

    //给包裹层添加关闭函数
    mywrapper.addEventListener("click", function() {
        myLayer.hide(mywrapper, mylayer);
    }, false);
    </script>
</body>

</html>
